<template>
  {{obj}}
  <avue-form :option="option"
             v-model="obj"> </avue-form>
</template>
<script>
let baseUrl = 'https://cli.avuejs.com/api/area'
export default {
  data () {
    return {
      obj: {
        cascader: '1,2',
        province: 120000,
        radio: 1,
        checkbox: '1,2,3',
        selects: '1,2,3'
      },
      option: {
        column: [
          {
            label: '单选',
            prop: 'radio',
            type: 'radio',
            dataType: 'number',
            dicData: [{
              label: '选项1',
              value: 1
            }, {
              label: '选项2',
              value: 2
            }, {
              label: '选项3',
              value: 3
            }]
          },
          {
            label: '多选',
            prop: 'checkbox',
            type: 'checkbox',
            dataType: 'number',
            dicData: [{
              label: '选项1',
              value: 1
            }, {
              label: '选项2',
              value: 2
            }, {
              label: '选项3',
              value: 3
            }]
          },
          {
            label: '多选',
            prop: 'selects',
            type: 'select',
            multiple: true,
            dicData: [{
              label: '选项1',
              value: '1'
            }, {
              label: '选项2',
              value: '2'
            }, {
              label: '选项3',
              value: '3'
            }]
          },
          {
            label: '级联',
            prop: 'cascader',
            type: 'cascader',
            dataType: 'string',
            dicData: [{
              label: '级别1',
              value: 1,
              children: [{
                label: '级别2',
                value: 2
              }]
            }],
            rules: [
              {
                required: true,
                message: '请选择级联',
                trigger: 'blur'
              }
            ]
          },
          {
            label: '省份',
            prop: 'province',
            type: 'select',
            dataType: 'number',
            props: {
              label: 'name',
              value: 'code'
            },
            dicUrl: `${baseUrl}/getProvince`,
            rules: [
              {
                required: true,
                message: '请选择省份',
                trigger: 'blur'
              }
            ]
          }
        ]
      }
    }
  },
}
</script>
